<template>
    <div>
        <div class="title flex al juct">语桥20年只做高端</div>

        <div class="stren_tab">
            <div @mouseover="index = 1">
                <i :style="{'background-position':index===1?'-392px 0px':'-328px 0px'}"></i>
                <!-- background-position: -328px 0px; -->
                <font class="active">多班型选择</font>
            </div  >
            <div @mouseover="index = 2">
                <i :style="{'background-position':index===2?'-82px -64px':'0px -64px',width:'82px'}"></i>
                <!-- background-position: -82px -64px; -->
                <font>闭环学习</font>
            </div>
            <div @mouseover="index= 3">
                <i :style="{'background-position':index===3?'-231px -64px':'-164px -64px'}"></i>
                <!-- background-position: -230px -55px; -->
                <font>语桥优势</font>
            </div>
            <div @mouseover="index = 4">
                <i :style="{'background-position':index===4?'-362px -64px':'-298px -64px'}"></i>
                <!-- background-position: -362px -64px; -->
                <font>多时段授课</font>
            </div>
        </div>

        <div class="stren_tab-bottom">
            <ul v-show="index === 1" class="stren_tab-ul" style="display: none">
                <li style="background:url(/img/str1.jpg) no-repeat;">
                    <h3>常规线下课程</h3>
                    <p>
                        名师面对面答疑解惑<br>
                        摆脱惰性
                    </p>
                </li>
                <li style="background:url(/img/str2.jpg) no-repeat;">
                    <h3>单项课程</h3>
                    <p>
                        深入剖析,针对性讲解
                    </p>
                </li>
                <li style="background:url(/img/str3.jpg) no-repeat;">
                    <h3>封闭课程</h3>
                    <p>
                        封闭集训,<br>
                        短期迅速提分
                    </p>
                </li>
                <li style="background:url(/img/str4.jpg) no-repeat;">
                    <h3>新精英计划</h3>
                    <p>
                        单点突破<br>
                        +知识体系梳理
                    </p>
                </li>
                <li style="background:url(/img/str5.jpg) no-repeat;">
                    <h3>VIP课程</h3>
                    <p>
                        摆脱惰性,<br>
                        享1对1定制服务
                    </p>
                </li>
                <li style="background:url(/img/str6.jpg) no-repeat;">
                    <h3>在线课程</h3>
                    <p>
                        足不出户,<br>
                        体验名师教学
                    </p>
                </li>
            </ul>
            <ul v-show="index === 2" class="stren_tab-ul" style="display: none"></ul>
            <ul v-show="index === 3" class="stren_tab-ul" style="display: none">
                <li style="background: url(/img/li-1.jpg) no-repeat;">
                    <h3>教师</h3>
                    <p>选择10年以上<br>经验丰富教师</p>
                </li>
                <li style="background: url(/img/li-1.jpg) no-repeat;">
                    <h3>教师</h3>
                    <p>选择10年以上<br>经验丰富教师</p>
                </li>
                <li style="background: url(/img/li-1.jpg) no-repeat;">
                    <h3>教师</h3>
                    <p>选择10年以上<br>经验丰富教师</p>
                </li>
                <li style="background: url(/img/li-1.jpg) no-repeat;">
                    <h3>教师</h3>
                    <p>选择10年以上<br>经验丰富教师</p>
                </li>
                <li style="background: url(/img/li-1.jpg) no-repeat;">
                    <h3>教师</h3>
                    <p>选择10年以上<br>经验丰富教师</p>
                </li>
            </ul>
            <ul v-show="index === 4" class="stren_tab-ul">
                <li style="background: url(/img/ul4-li.jpg)">
                    <h3>全日班</h3>
                    <p>周一至周五</p>
                    <a href="" target="_blank">在线咨询</a>
                </li>
                <li style="background: url(/img/ul4-li.jpg)">
                    <h3>全日班</h3>
                    <p>周一至周五</p>
                    <a href="" target="_blank">在线咨询</a>
                </li>
                <li style="background: url(/img/ul4-li.jpg)">
                    <h3>全日班</h3>
                    <p>周一至周五</p>
                    <a href="" target="_blank">在线咨询</a>
                </li>
                <li style="background: url(/img/ul4-li.jpg)">
                    <h3>全日班</h3>
                    <p>周一至周五</p>
                    <a href="" target="_blank">在线咨询</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "diff",
        data(){
            return{
                index :1,
            }
        },
        methods:{

        },

    }
</script>

<style scoped>

</style>